import React, { useEffect } from 'react';
import { RouteComponentProps, useHistory } from 'react-router-dom';
import { Header, Footer } from '../../components';
import './index.less';
import {
  Form,
  Input,
  Select,
  Button,
  PageHeader,
  Steps,
  Checkbox,
  Row,
  Col,
  notification,
} from 'antd';
import { login } from '../../http/api';
interface MatchParams {}
const { Step } = Steps;
const { Option } = Select;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 5 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 5,
    },
  },
};
const tailLayout = {
  wrapperCol: { offset: 5, span: 16 },
};
export const Login: React.FC<RouteComponentProps<MatchParams>> = (props) => {
  const [form] = Form.useForm();
  const history = useHistory();

  useEffect(() => {
    const logininfo = localStorage.cylpassword;
    if (logininfo) {
      form.setFieldsValue({ phone: logininfo.split(';')[1] });
      form.setFieldsValue({ password: logininfo.split(';')[0] });
      form.setFieldsValue({ remember: true });
    }
  }, [form]);

  // 提交表单
  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
    const data = {
      mobile: values.phone,
      password: values.password,
    };

    login(data).then((res: any) => {
      if (res.code !== 1) {
        return notification.info({
          message: ``,
          description: res.msg,
        });
      }
      if (values.remember) {
        localStorage.cylpassword = values.password + ';' + values.phone;
      } else {
        localStorage.removeItem('cylpassword');
      }
      localStorage.cylinfo = JSON.stringify(res.data);
      notification.success({
        message: ``,
        description: '登录成功',
      });
      setTimeout(() => {
        history.go(-1);
      }, 1000);
    });
  };

  const prefixSelector = (
    <Form.Item name='prefix' noStyle>
      <Select style={{ width: 70 }}>
        <Option value='86'>+86</Option>
        <Option value='87'>+87</Option>
      </Select>
    </Form.Item>
  );

  return (
    <div className='registerbox'>
      <Header></Header>

      <div className='register'>
        <PageHeader className='site-page-header' title='用户登录' subTitle='' />
        <Steps current={0} className='step' size='small'>
          <Step title='填写登录信息' description='' />
          <Step title='登录成功' description='' />
        </Steps>
        <Form
          {...formItemLayout}
          form={form}
          name='register'
          onFinish={onFinish}
          initialValues={{
            prefix: '86',
            remember: false,
          }}
          scrollToFirstError
        >
          <Form.Item
            name='phone'
            label='手机号'
            rules={[
              { required: true, message: '请输入您的手机号码!' },
              {
                validator: async (rulreturne, value) => {
                  if (!value) {
                    return;
                  }
                  const regu = '^1[0-9]{10}$';
                  const re = new RegExp(regu);
                  if (re.test(value)) {
                  } else {
                    throw new Error('请输入正确的手机号码!');
                  }
                },
              },
            ]}
          >
            <Input addonBefore={prefixSelector} style={{ width: '100%' }} />
          </Form.Item>

          <Form.Item
            name='password'
            label='密码'
            rules={[
              {
                required: true,
                message: '请输入密码!',
              },
            ]}
            hasFeedback
          >
            <Input.Password />
          </Form.Item>

          <Form.Item {...tailLayout}>
            <Row gutter={6}>
              <Col span={20}>
                <Form.Item name='remember' valuePropName='checked' noStyle>
                  <Checkbox>记住我</Checkbox>
                </Form.Item>
              </Col>
              <Col span={4} style={{ textAlign: 'right' }}>
                <a href='/forgetPassword'>找回密码?</a>
              </Col>
            </Row>
          </Form.Item>
          <Form.Item {...tailFormItemLayout}>
            <Button type='primary' htmlType='submit' block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
      <Footer></Footer>
    </div>
  );
};
